<template>
	<!-- 下载中心 -->
	<div>
		<!-- 头部 -->
		<div style="width: 100%; min-width: 1920px;">

			<div class="banner_d"> </div>
		</div>

		<!-- 内容 -->
		<div class="center_d">
			<div style="width: 1510px; position: relative; margin: 0px auto;">
				<div style="display: flex;">
					<div style="flex: 1;">
						<span style="font-size: 27px; font-weight: bold;">下载</span>
						<!-- 搜索框 -->
						<div
								style="width: 380px; height: 50px; margin: 40px 0px 27px 0px; border: 1px solid gray; background-color: white; display: flex;">
							<span style="flex: 2; text-align: left; line-height: 50px;"><i class="bi bi-search"
																						   style="color: gray; padding-left: 30px; cursor: pointer;"></i></span>
							<input type="text" placeholder="搜索 所有文件"
								   style="flex: 4; font-size: 20px; outline: none; border: 0px;">
						</div>
						<!-- 文件类型列表框样式 -->
						<div class="row">
							<div class="col-4">
								<div class="list-group fileList" id="list-tab" role="tablist" style="width: 380px;">
									<a class="list-group-item active" id="list-home-list" data-toggle="list"
									   :class="filetype==-1?'current_nav':''" @click="navchange(-1)" href="#list-home"
									   role="tab" aria-controls="home">
										<i class="bi bi-flower3"></i>
										<span class="tiFormats1">所有文件</span>
									</a>
									<a class="list-group-item" id="list-profile-list" data-toggle="list"
									   :class="filetype==0?'current_nav':''" @click="navchange(0)" href="#list-profile"
									   role="tab" aria-controls="profile">
										<i class="bi bi-file-earmark-pdf"></i>
										<span class="tiFormats2">PDF</span>
									</a>
									<a class="list-group-item" id="list-messages-list" data-toggle="list"
									   :class="filetype==1?'current_nav':''" @click="navchange(1)"
									   href="#list-messages" role="tab" aria-controls="messages">
										<i class="bi bi-file-earmark"></i>
										<span class="tiFormats2">文档</span>
									</a>
									<a class="list-group-item" id="list-settings-list" data-toggle="list"
									   :class="filetype==2?'current_nav':''" @click="navchange(2)"
									   href="#list-settings" role="tab" aria-controls="settings">
										<i class="bi bi-card-image"></i>
										<span class="tiFormats2">图像</span>
									</a>
									<a class="list-group-item" id="list-settings-list" data-toggle="list"
									   :class="filetype==3?'current_nav':''" @click="navchange(3)"
									   href="#list-settings" role="tab" aria-controls="settings">
										<i class="bi bi-file-earmark-zip"></i>
										<span class="tiFormats1">压缩文件</span>
									</a>
									<a class="list-group-item" id="list-settings-list" data-toggle="list"
									   :class="filetype==4?'current_nav':''" @click="navchange(4)"
									   href="#list-settings" role="tab" aria-controls="settings">
										<i class="bi bi-file"></i>
										<span class="tiFormats2">其他</span>
									</a>
								</div>
							</div>
						</div>
					</div>
					<div style="flex: 1.7; height: 820px;">
						<span style="font-size: 27px; font-weight: bold;">所有文件</span>
						<div style="width: 85%; margin-top: 44px;">
							<ul class="list-group flieContent" v-if="fileListInfo.length>0">
								<li class="list-group-item" v-for="item in fileListInfo">
									<div style="display: flex;">
										<div style="flex:6;">
											<ul>
												<li style="list-style-type: disc;"><span
														style="font-size: 17px;">{{item.fileName}}</span></li>
												<li><span
														style="font-size: 13px; color: darkgray;">{{item.fileExplain}}</span>
												</li>
												<li @click="filereview(item.filePath)" style="display: inline-block;" v-if="item.fileType==0"><span
														style="text-decoration: underline;color: #0000EE;cursor: pointer;" >显示预览</span></li>
												<li style="display: inline-block;padding: 0 10px;"><a href="#"
																									  style="text-decoration: underline;"
																									  @click="downloadFile(item.filePath,item.fileName)">下载</a></li>
											</ul>
										</div>
										<div style="flex: 1;">
											<ul style="padding-left: 0px; text-align: center;">
												<li style="margin-top: 18px;">
													<div>
														<span><i class="bi bi-cloud-download"></i></span>
														<span style="font-size: 20px; color: darkgray;"
															  class="downloadDate">{{item.size}}</span>
													</div>
												</li>
												<li style="margin-top: 2px;">
													<span
															style="font-size: 17px; color: darkgray;">{{item.createTime}}</span>
												</li>
											</ul>
										</div>
									</div>
								</li>

							</ul>

							<el-empty :image-size="200" v-else description="暂无可下载文件"></el-empty>



						</div>
						<el-pagination background :current-page="currentPage" layout="prev, pager, next" @current-change="queryFileList"  hide-on-single-page :total="total">
						</el-pagination>

					</div>
				</div>

			</div>
		</div>

	</div>

</template>

<script>
	export default {
		created() {
			this.queryFileList();

		},
		data() {
			return {
				//文件信息列表
				fileListInfo: [],
				filetype: -1,
				currentPage: 1,
				pageSize: 10,
				total: 0,

			}
		},
		methods: {
			//文件预览
			filereview(path){
				console.log(this.$http.defaults.baseURL)
				let url=this.$http.defaults.baseURL+"/file/down?path="+path;
				this.$router.push({
					path:'/view?url='+url,

				})

			},


			//文件列表查询
			queryFileList() {
				let that = this;
				that.$http.get(
						`/file/list?currentPage=${that.currentPage}&pageSize=${that.pageSize}&filetype=${that.filetype}`)
						.then(res => {
							that.fileListInfo= res.data.list;
							that.currentPage = res.data.currentPage;
						})
			},
			//文件下载
			downloadFile(path,fileName) {
				this.$http.get(`/file/down?path=${path}`, {
					responseType: 'blob',
				}).then(res => {

					let url = window.URL.createObjectURL(res.data)
					let link = document.createElement('a')
					link.style.display = 'none'
					link.href = url
					link.setAttribute('download', fileName)
					document.body.appendChild(link)
					link.click()


				})
			},
			//左侧导航样式控制
			navchange(index) {
				//重置分页参数
				this.currentPage = 1
				this.filetype = index
				this.queryFileList();
			},
		}
	}
</script>

<style scoped>
	.current_nav {
		background-color: #000FFF !important;
	}

	.center_d {
		width: 100%;
		background: url(../../public/img/6-0-2.png) no-repeat;
		background-size: 100% 100%;
		background-color: #E5EBFF;
		padding: 60px;
	}

	.banner_d {
		width: 100%;
		height: 300px;
		background: url(../../public/img/6-0-1.png) no-repeat;
		background-size: 100% 100%;
	}

	a {
		text-decoration: none;
	}

	li {
		list-style: none;
	}

	/* 标题栏 */
	.titleBlock {
		height: 300px;
		width: 1920px;
		padding: 140px 0px 0px 430px;
	}

	/* 标题内容 */
	.titleContent {
		height: 32px;
		width: 370px;
		border-left: 5px solid blue;
		line-height: 29px;
	}

	/* 文件类型列表框内部的文件列表样式 */
	.fileList>a {
		background-color: rgba(201, 213, 255);
		margin-bottom: 22px;
		height: 46px;
		line-height: 14px;
		text-align: left;
		padding-left: 0px;
		padding-right: 0px;
		font-size: 20px;
		text-align: center;
	}

	/* 文件类型列表框内部的文字图标样式1 */
	.fileList i {
		line-height: 14px;
		font-size: 20px;
	}

	/* 文件类型列表框内部的文字与图标样式2 */
	.tiFormats1 {
		padding: 0px 100px;
	}

	.tiFormats2 {
		padding: 0px 120px;
	}

	/* 文件列表点击之后样式 */
	.flActive {
		background-color: rgb(48, 102, 227);
	}

	/* 文件列表鼠标移入样式 */
	.fileList>a:hover {
		background-color: rgba(0, 123, 255);
	}

	/* 文件列表内容样式 */
	.flieContent>li {
		height: 100px;
		margin-bottom: 18px;
		border-radius: 3%;
	}

	/* 文件列表内容内部的文字图标样式 */
	.flieContent i {
		font-size: 20px;
		color: gray;
		cursor: pointer;
	}

	/* 文件列表内容内部的文字图标样式 */
	.downloadDate {
		padding: 0px 20px;
	}

	/* 框架内部分页框样式 */
	.paginationFrame a {
		padding: 6px 16px;
		background-color: rgb(48, 102, 227);
		border-radius: 10%;
		margin-right: 17px;
		color: white;
	}

	/* 遮罩层 */
	#mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		left: 0;
		/* display: none; */
		z-index: 9;
	}

	/* 输入信息框样式 */
	.insertInformation {
		width: 660px;
		padding: 100px 154px;
		background-color: white;
		position: absolute;
		left: 380px;
		top: -150px;
		z-index: 10;
		text-align: left;
		/* display: none; */
	}

	/* 输入信息框内部字体样式 */
	.insertInformation span {
		font-size: 20px;
	}

	/* 输入信息框内部的输入框每行的相隔距离 */
	.insertInput>div {
		margin-bottom: 52px;
	}

	/* 输入信息框内部的输入框样式 */
	.insertInformation input {
		width: 250px;
		/* 取消点击输入框后出现的边框 */
		outline: none;
		border: 0px;
		border-bottom: 1px solid #000;
	}

	/* 输入信息框内部的输入时间框样式 */
	.insertTimeInput input {
		width: 62px;
	}

	/* 输入信息框切换图标1样式 */
	.changeIcon>i:nth-child(1) {
		position: absolute;
		left: 230px;
		top: 330px;
		font-size: 70px;
		color: white;
		z-index: 10;
		cursor: pointer;
	}

	/* 输入信息框切换图标2样式 */
	.changeIcon>i:nth-child(2) {
		position: absolute;
		left: 1120px;
		top: 330px;
		font-size: 70px;
		color: white;
		z-index: 10;
		cursor: pointer;
	}
</style>
